<template>
	<view>

				<view class="status" :style="{ position: headerPosition }"></view>	

		<view class="header" :style="{ position: headerPosition }">
			<!-- 定位城市 -->
			<view class="addr">
	    <view class="lg text-gray icon-size icon-back" style="margin-left: 1px;" @click="gobanck"></view>
			</view>
			<!-- 搜索框  -->
			<view class="input-box">
				<input
					placeholder="请输入查询关键字"
					placeholder-style="color:#c0c0c0;"
				     v-model="queryStr"
				/>
				<!-- <view class="lg text-gray icon-search"></view> -->
			</view>

		</view>
		
	<!-- jiange	 -->
	<view class="place"></view>
	
	
	<view class="cu-list menu menu-avatar" >
			
			<view class="cu-item " v-for="(ziyuan,index) in mubanList" :key="ziyuan.infoid" @click="ziyuan_ck(ziyuan)">
				<view class="cu-avatar round lg" v-bind:style="{backgroundImage:'url(' + ziyuan.wximg + ')'}"></view>
				<view class='content'>
					<view class='text-cut'>{{ziyuan.title}} 
					<!-- <view class="cu-tag round bg-orange sm">Svip</view> -->
					</view>
					<view class='text-gray text-sm'>
						<text class="icon-new text-orange margin-right-xs"></text> {{ziyuan.fenlei}},{{ziyuan.times}}</view>					
				</view>
				<view class='action'>
					<view class='text-grey text-xs'>{{ziyuan.click}}</view>
					<view class="cu-tag round bg-grey sm">svip</view>
				</view>
			</view>				
			
	<!-- jiange	 --> 
		
		</view>
		
	</view>
</template>

<script>
	var page=1;
const debounce = (function() {
    let timer = 0;
    return function(func, delay) {
      clearTimeout(timer);
      timer = setTimeout(func, delay);
    };
})();	
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				TabCur: 0,
				scrollLeft: 0,
				PageCur:0,
				headerPosition: 'fixed',
				mubanList : [],
                queryStr: ''

			};
		},
		
		onLoad() {
		page = 1;
		mubanList : [];
		this.getNewsList();		
		}, 
		
	watch: {
    queryStr() {
      debounce(() => {
		 	page = 1;	
			this.mubanList = [];
        this.getNewsList();
      }, 200);
    },
},		
		
//		
			onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			if (e.scrollTop >= 0) {
				this.headerPosition = 'fixed';
			} else {
				this.headerPosition = 'absolute';
			}
		},
	//下拉刷新
	onPullDownRefresh : function(){
		// 重置分页及数据
		page = 1;	
		this.mubanList = [];		
		this.getNewsList()
	
	},
	// 加载更多
	onReachBottom : function(){
		this.getNewsList();
	},		
		
		
		methods: {
			searchIcon(e) {
				let key = e.detail.value.toLowerCase();
				let list = this.icon;

				this.icon = list
			},
				getNewsList: function(){
				uni.showLoading({});
				//页数
				if(page >= 10){
					  setTimeout(function () {
					uni.showToast({"title":"已经加载全部", icon:"none"});
					},1000);
					return ;
				}
				console.log(this.queryStr);
				uni.request({
				url: 'https://api.xuejss.com/xue/?s=ziyuan.zy_list&page='+page+'&keyword='+this.queryStr,
				method: 'GET',
				data: {},
					success: res => {
						//console.log(res);
						if(res.data.data.length<0){
							
							uni.hideLoading(); 
							
						}else{
						var newsList = res.data.data;
						this.mubanList = this.mubanList.concat(newsList);

                        uni.hideLoading();
						page++;	
							
						}

					},
					complete: res => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
				});
			},	
			ziyuan_ck(url){
				uni.navigateTo({
					url:'../zyuan_xq/zyuan_xq?id=' + url.infoid+'&type='+url.type
				})
			},	
		gobanck: function() {
			uni.navigateBack();
		},							
					
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				console.log(this.TabCur);
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			}		
		}
	}
</script>
<style>
/* product */
.uni-product-list {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row;
}

.uni-product {
    padding: 20upx;
    display: flex;
    flex-direction: column;
}

.image-view {
    height: 586.96upx;
    width: 330upx;
	margin:12upx 0;
}

.uni-product-image {
    height: 586.96upx;
    width: 330upx;
}

.uni-product-title {
    width: 300upx;
    word-break: break-all;
    display: -webkit-box;
    overflow: hidden;
	line-height:1.5;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.uni-product-price {
	margin-top:10upx;
    font-size: 28upx;
	line-height:1.5;
    position: relative;
}

.uni-product-price-original {
    color: #e80080;
}

.uni-product-price-favour {
    color: #888888;
    text-decoration: line-through;
    margin-left: 10upx;
}

.uni-product-tip {
    position: absolute;
    right: 10upx;
    background-color: #ff3333;
    color: #ffffff;
    padding: 0 10upx;
    border-radius: 5upx;
}	
</style>

<style lang="scss">
	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		background-color: #eccff1;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */
	}
	
	.header {
		width: 100%;
		padding: 0 4%;
		height: 120upx;
		display: flex;
		align-items: center;
		position: fixed;
		border-bottom:1px solid #eccff1;
		top: 0;
		z-index: 10;
		background-color: #fff;
		/*  #ifdef  APP-PLUS  */ 
		top: var(--status-bar-height);
		/*  #endif  */ 
	
		.addr {
			width: 60upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			font-size: 32upx;
			color: #98a7b0;
			.icon {
				height: 60upx;
				margin-right: 5upx;
				display: flex;
				align-items: center;
				font-size: 42upx;
				color: #ffc50a;
			}			
		}
		.input-box {
			width: 100%;
			height: 60upx;
			background-color: #f5f5f5;
			border-radius: 30upx;
			position: relative;
			display: flex;
			align-items: center;
			text-align: center;
			.icon {
				display: flex;
				align-items: center;
				position: absolute;
				top: 0;
				right: 0;
				width: 60upx;
				height: 60upx;
				font-size: 34upx;
				color: #c0c0c0;
			}
			input {
				padding-left: 28upx;
				height: 28upx;
				font-size: 28upx;
			}
		}
		.iconn-btn {
			width: 120upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			line-height: 60upx;
		}
		
		.icon-size {
		    font-size: 19px;
            margin-left: 10px;	
			
		}
	}
	.place {
		background-color: #ffffff;
		height: 100upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}
</style>
